<template>
  <section id="market" class="observe">
    <div class="container">
      <h2 data-i18n="sec_market">模板市场</h2>
      <p class="subtitle" data-i18n="sec_market_desc">精选爆款工作流</p>
      
      <div class="market-filter">
        <div class="search">
          <input type="text" :placeholder="searchPlaceholder" v-model="searchQuery">
          <button><i class="el-icon-search"></i></button>
        </div>
        
        <div class="filter-tags">
          <div class="tag" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')" data-i18n="filter_all">全部</div>
          <div class="tag" :class="{ active: activeFilter === 'hot' }" @click="setFilter('hot')" data-i18n="filter_hot">热门</div>
          <div class="tag" :class="{ active: activeFilter === 'new' }" @click="setFilter('new')" data-i18n="filter_new">最新</div>
          <div class="tag" :class="{ active: activeFilter === 'marketing' }" @click="setFilter('marketing')" data-i18n="filter_marketing">营销</div>
          <div class="tag" :class="{ active: activeFilter === 'review' }" @click="setFilter('review')" data-i18n="filter_review">测评</div>
        </div>
      </div>
      
      <div class="market-grid">
        <!-- 模板卡片 1 -->
        <div class="market-card">
          <div class="thumb cover--hot">
            <div class="badge hot" data-i18n="badge_hot">热门</div>
            <div class="duration">00:15</div>
          </div>
          <div class="info">
            <h3 data-i18n="tpl_hot_title">3 秒热点快剪</h3>
            <p data-i18n="tpl_hot_desc">快速抓取热点，15秒吸睛短视频</p>
            <div class="meta">
              <div class="views">2.3k</div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star half">★</div>
                <span>4.5</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 模板卡片 2 -->
        <div class="market-card">
          <div class="thumb cover--review">
            <div class="badge new" data-i18n="badge_new">新品</div>
            <div class="duration">01:30</div>
          </div>
          <div class="info">
            <h3 data-i18n="tpl_review_title">产品测评口播</h3>
            <p data-i18n="tpl_review_desc">专业产品评测，带货种草必备</p>
            <div class="meta">
              <div class="views">1.8k</div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <span>5.0</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 模板卡片 3 -->
        <div class="market-card">
          <div class="thumb cover--news">
            <div class="duration">00:45</div>
          </div>
          <div class="info">
            <h3 data-i18n="tpl_news_title">60秒资讯速递</h3>
            <p data-i18n="tpl_news_desc">简洁新闻播报，快速传递信息</p>
            <div class="meta">
              <div class="views">1.5k</div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">☆</div>
                <span>4.0</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 模板卡片 4 -->
        <div class="market-card">
          <div class="thumb cover--story">
            <div class="duration">02:15</div>
          </div>
          <div class="info">
            <h3 data-i18n="tpl_story_title">品牌故事叙述</h3>
            <p data-i18n="tpl_story_desc">情感化品牌故事，建立品牌认同</p>
            <div class="meta">
              <div class="views">1.2k</div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star half">★</div>
                <span>4.7</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 模板卡片 5 -->
        <div class="market-card">
          <div class="thumb cover--tutorial">
            <div class="duration">03:45</div>
          </div>
          <div class="info">
            <h3 data-i18n="tpl_tutorial_title">教程讲解模板</h3>
            <p data-i18n="tpl_tutorial_desc">清晰步骤拆解，专业知识传授</p>
            <div class="meta">
              <div class="views">2.0k</div>
              <div class="rating">
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">★</div>
                <div class="star">☆</div>
                <span>4.2</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 推广卡片 -->
        <div class="market-card promo">
          <div class="promo-content">
            <h3 data-i18n="promo_title">获取更多优质工作流</h3>
            <p data-i18n="promo_desc">升级专业版，解锁全部模板</p>
            <button class="btn-primary" data-i18n="promo_btn">立即升级</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 搜索和过滤状态
const searchQuery = ref('');
const activeFilter = ref('all');

// 设置过滤器
const setFilter = (filter) => {
  activeFilter.value = filter;
};

// 国际化字典
const i18n = {
  zh: {
    sec_market: '模板市场',
    sec_market_desc: '精选爆款工作流',
    filter_all: '全部',
    filter_hot: '热门',
    filter_new: '最新',
    filter_marketing: '营销',
    filter_review: '测评',
    badge_hot: '热门',
    badge_new: '新品',
    tpl_hot_title: '3 秒热点快剪',
    tpl_hot_desc: '快速抓取热点，15秒吸睛短视频',
    tpl_review_title: '产品测评口播',
    tpl_review_desc: '专业产品评测，带货种草必备',
    tpl_news_title: '60秒资讯速递',
    tpl_news_desc: '简洁新闻播报，快速传递信息',
    tpl_story_title: '品牌故事叙述',
    tpl_story_desc: '情感化品牌故事，建立品牌认同',
    tpl_tutorial_title: '教程讲解模板',
    tpl_tutorial_desc: '清晰步骤拆解，专业知识传授',
    promo_title: '获取更多优质工作流',
    promo_desc: '升级专业版，解锁全部模板',
    promo_btn: '立即升级',
    search_placeholder: '搜索模板...',
  },
  en: {
    sec_market: 'Template Market',
    sec_market_desc: 'Featured workflows',
    filter_all: 'All',
    filter_hot: 'Hot',
    filter_new: 'New',
    filter_marketing: 'Marketing',
    filter_review: 'Reviews',
    badge_hot: 'HOT',
    badge_new: 'NEW',
    tpl_hot_title: '3-sec Trending Clips',
    tpl_hot_desc: 'Quick trending topics, 15-sec attention grabbers',
    tpl_review_title: 'Product Review',
    tpl_review_desc: 'Professional product evaluation for conversions',
    tpl_news_title: '60-sec News Flash',
    tpl_news_desc: 'Concise news reporting, quick information delivery',
    tpl_story_title: 'Brand Storytelling',
    tpl_story_desc: 'Emotional brand stories, building brand identity',
    tpl_tutorial_title: 'Tutorial Template',
    tpl_tutorial_desc: 'Clear step-by-step breakdown, professional knowledge',
    promo_title: 'Get More Premium Workflows',
    promo_desc: 'Upgrade to Pro, unlock all templates',
    promo_btn: 'Upgrade Now',
    search_placeholder: 'Search templates...',
  },
  es: {
    sec_market: 'Mercado de Plantillas',
    sec_market_desc: 'Flujos de trabajo destacados',
    filter_all: 'Todo',
    filter_hot: 'Popular',
    filter_new: 'Nuevo',
    filter_marketing: 'Marketing',
    filter_review: 'Reseñas',
    badge_hot: 'POPULAR',
    badge_new: 'NUEVO',
    tpl_hot_title: 'Clips de Tendencia 3s',
    tpl_hot_desc: 'Temas de tendencia rápidos, captadores de atención de 15s',
    tpl_review_title: 'Reseña de Producto',
    tpl_review_desc: 'Evaluación profesional de productos para conversiones',
    tpl_news_title: 'Noticias en 60 segundos',
    tpl_news_desc: 'Informes de noticias concisos, entrega rápida de información',
    tpl_story_title: 'Narrativa de Marca',
    tpl_story_desc: 'Historias de marca emocionales, construyendo identidad',
    tpl_tutorial_title: 'Plantilla de Tutorial',
    tpl_tutorial_desc: 'Desglose claro paso a paso, conocimiento profesional',
    promo_title: 'Obtén Más Flujos Premium',
    promo_desc: 'Actualiza a Pro, desbloquea todas las plantillas',
    promo_btn: 'Actualizar Ahora',
    search_placeholder: 'Buscar plantillas...',
  }
};

// 计算属性：搜索占位符
const searchPlaceholder = computed(() => {
  const lang = localStorage.getItem('lang') || 'zh';
  return i18n[lang]?.search_placeholder || '搜索模板...';
});

// 生命周期钩子
onMounted(() => {
  // 初始化语言
  const savedLang = localStorage.getItem('lang') || 'zh';
  applyLang(savedLang);
  
  // 监听语言变化
  window.addEventListener('storage', (e) => {
    if (e.key === 'lang') {
      applyLang(e.newValue);
    }
  });
  
  // 设置观察器，当元素进入视口时添加reveal类
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('reveal');
      }
    });
  }, { threshold: 0.12 });
  
  document.querySelectorAll('.observe .market-card').forEach(el => {
    observer.observe(el);
  });
});

// 应用语言
const applyLang = (lang) => {
  const dict = i18n[lang];
  if (!dict) return;
  
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.dataset.i18n;
    if (dict[key]) el.innerHTML = dict[key];
  });
};
</script>

<style scoped>
/* 模板市场区域样式 */
#market {
  padding: 80px 0;
  background: var(--section-alt-bg);
}

h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 16px;
}

.subtitle {
  text-align: center;
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.market-filter {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.search {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  position: relative;
}

.search input {
  width: 100%;
  padding: 12px 20px;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  font-size: 16px;
  color: var(--text);
  transition: all 0.3s ease;
}

.search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.search button {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.search button:hover {
  background: var(--primary-dark);
}

.filter-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.tag {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--tag-bg);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tag:hover {
  background: var(--hover);
}

.tag.active {
  background: var(--primary);
  color: white;
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.market-card {
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}

.market-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.market-card:nth-child(2) {
  transition-delay: 0.1s;
}

.market-card:nth-child(3) {
  transition-delay: 0.2s;
}

.market-card:nth-child(4) {
  transition-delay: 0.3s;
}

.market-card:nth-child(5) {
  transition-delay: 0.4s;
}

.market-card:nth-child(6) {
  transition-delay: 0.5s;
}

.market-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.thumb {
  height: 180px;
  background: var(--thumb-bg);
  position: relative;
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.badge.hot {
  background: #ff4757;
}

.badge.new {
  background: #2ed573;
}

.duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

.info {
  padding: 20px;
}

.info h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.info p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.views {
  font-size: 14px;
  color: var(--text-muted);
}

.views::before {
  content: '👁️ ';
  margin-right: 4px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 2px;
}

.star {
  color: #ffc107;
  font-size: 14px;
  line-height: 1;
}

.star.half {
  position: relative;
  overflow: hidden;
  width: 0.5em;
}

.rating span {
  margin-left: 6px;
  font-size: 14px;
  color: var(--text-muted);
}

/* 推广卡片样式 */
.market-card.promo {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
}

.promo-content {
  color: white;
}

.promo-content h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.promo-content p {
  font-size: 16px;
  margin-bottom: 24px;
  opacity: 0.9;
}

.btn-primary {
  background: white;
  color: var(--primary);
  border: none;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 封面样式 */
.cover--hot {
  background-image: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
}

.cover--review {
  background-image: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
}

.cover--news {
  background-image: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
}

.cover--story {
  background-image: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
}

.cover--tutorial {
  background-image: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .market-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .market-card.promo {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .market-grid {
    grid-template-columns: 1fr;
  }
  
  .market-card.promo {
    grid-column: auto;
  }
  
  h2 {
    font-size: 30px;
  }
  
  .subtitle {
    font-size: 16px;
  }
  
  .filter-tags {
    gap: 8px;
  }
  
  .tag {
    padding: 6px 12px;
    font-size: 13px;
  }
}
</style>